<!-- 饼图 -->
<template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "",
    required: true,
  },
  height: {
    type: String,
    default: "250px",
    required: true,
  },
});
const options = {
  tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: false,
          left: 'center',
          bottom: '10',
          data: ['Industries', 'Technology']
        },
        series: [
          {
            name: 'WEEKLY WRITE ARTICLES',
            type: 'pie',
            // roseType: 'radius',
            radius: [0, 95],
            center: ['50%', '38%'],
            data: [
              {
                value: 320,
                name: 'Industries',
                itemStyle: {
                  color: 'rgba(32, 141, 255, 1)' // 设置为蓝色
                }
              },
              { value: 240,
                name: 'Technology',
                itemStyle: {
                  color: 'rgba(57, 221, 189, 1)' // 设置为绿色
                }
              }
              /* { value: 149, name: 'Forex' },
              { value: 100, name: 'Gold' },
              { value: 59, name: 'Forecasts' } */
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
  
};

onMounted(() => {
  const chart = echarts.init(
    document.getElementById(props.id) as HTMLDivElement
  );
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
